<template>
  <div class="info page">
    <div class="bg"></div>
    <div class="main">
      <div class="top">
        <div class="user">
          <div class="avatar">
            <img :src="user.avatar" alt="" class="img">
          </div>
          <div class="con">
            <span class="name">{{user.name}}</span>
            <span class="code">{{user.code}}  {{user.mobile}}</span>
            <span class="lv">{{LEVEL_NAMES[user.levelId]}}</span>
          </div>
          <span v-if="isMe" @click="showQr" class="qr iconfont iconiconfonterweima"></span>
          <span v-if="isMe" @click="toEdit" class="edit iconfont iconzongjie"></span>
        </div>
        <div class="base" v-if="user.levelId===LEVELS.BUS">
          <div class="item">
            <span class="val">{{user.age}}</span>
            <span class="text">年龄</span>
          </div>
          <div class="item">
            <span class="val">{{user.sex}}</span>
            <span class="text">性别</span>
          </div>
          <div class="item">
            <span class="val">{{user.edu}}</span>
            <span class="text">学历</span>
          </div>
          <div class="item">
            <span class="val">{{user.major}}</span>
            <span class="text">专业</span>
          </div>
        </div>
      </div>

      <div class="detail" v-if="user.levelId===LEVELS.BUS">
        <div class="item">
          <span class="text">我的积分</span>
          <span class="val">{{point}}</span>
        </div>
        <div class="item">
          <span class="text">激活状态</span>
          <span class="val">{{status[user.status]}}</span>
        </div>
        <div class="item">
          <span class="text">手机号码</span>
          <span class="val">{{user.mobile}}</span>
        </div>
        <div class="item">
          <span class="text">银行开户人</span>
          <span class="val">{{user.bankUser}}</span>
        </div>
        <div class="item">
          <span class="text">银行账号</span>
          <span class="val">{{user.bankNum}}</span>
        </div>
        <div class="item">
          <span class="text">开户银行</span>
          <span class="val">{{user.bankName}}</span>
        </div>
        <div class="item">
          <span class="text">开户分行</span>
          <span class="val">{{user.bankBranch}}</span>
        </div>
        <div class="item">
          <span class="text">身份证号</span>
          <span class="val">{{user.idCard}}</span>
        </div>
        <div class="item">
          <span class="text">入职时间</span>
          <span class="val">{{parseTime(user.joinDate)}}</span>
        </div>
        <div v-if="isMe">
        <div class="item" @click="toUser">
          <span class="text">我的店员</span>
          <span class="val">{{sumUser}}</span>
        </div>

        <div class="item" @click="toShop">
          <span class="text">我的门店</span>
          <span class="val">{{sumShop}}</span>
        </div>

        <div class="item" @click="toSchool">
          <span class="text">我的学校</span>
          <span class="val">{{sumSchool}}</span>
        </div>
        </div>

      </div>
      <div class="detail" v-if="user.levelId===LEVELS.SHOP">

        <div class="item">
          <span class="text">我的积分</span>
          <span class="val">{{point}}</span>
        </div>

        <div class="item">
          <span class="text">激活状态</span>
          <span class="val">{{status[user.status]}}</span>
        </div>
        <div class="item">
          <span class="text">手机号码</span>
          <span class="val">{{user.mobile}}</span>
        </div>
        <div class="item">
          <span class="text">连锁名称</span>
          <span class="val">{{user.linkName}}</span>
        </div>
        <div class="item">
          <span class="text">药店名称</span>
          <span class="val">{{user.shopName}}</span>
        </div>
        <div class="item">
          <span class="text">药店代码</span>
          <span class="val">{{parseTime(user.shopCode)}}</span>
        </div>
      </div>

      <div class="detail" v-if="user.levelId>LEVELS.BUS">
        <div class="item">
          <span class="text">我的积分</span>
          <span class="val">{{point}}</span>
        </div>
        <div class="item">
          <span class="text">激活状态</span>
          <span class="val">{{status[user.status]}}</span>
        </div>
        <div class="item">
          <span class="text">手机号码</span>
          <span class="val">{{user.mobile}}</span>
        </div>
        <div class="item">
          <span class="text">银行开户人</span>
          <span class="val">{{user.bankUser}}</span>
        </div>
        <div class="item">
          <span class="text">银行账号</span>
          <span class="val">{{user.bankNum}}</span>
        </div>
        <div class="item">
          <span class="text">开户银行</span>
          <span class="val">{{user.bankName}}</span>
        </div>
        <div class="item">
          <span class="text">开户分行</span>
          <span class="val">{{user.bankBranch}}</span>
        </div>
        <div v-if="isMe">
          <div class="item">
            <span class="text">我的积分</span>
            <span class="val">{{point}}</span>
          </div>

          <div class="item" @click="toUser">
            <span class="text">我的店员</span>
            <span class="val">{{sumUser}}</span>
          </div>

          <div class="item" @click="toShop">
            <span class="text">我的门店</span>
            <span class="val">{{sumShop}}</span>
          </div>

          <div class="item" @click="toSchool">
            <span class="text">我的学校</span>
            <span class="val">{{sumSchool}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { info } from '../../api/user'
import { LEVEL_NAMES, LEVELS } from '../../const'
import { parseTime } from '../../util/time'
import { mapState } from 'vuex'
export default {
  created () {
    let uid = this.my.id
    if (this.$route.query.uid) {
      uid = this.$route.query.uid
    }
    info(uid).then(res => {
      this.user = res.data
      this.point = res.extra.point
      this.sumUser = res.extra.sumUser
      this.sumSchool = res.extra.sumSchool
      this.sumShop = res.extra.sumShop
    })
  },
  methods: {
    toSchool () {
      this.$router.push('/route/index?type=2')
    },
    toUser () {
      this.$router.push('/user')
    },
    toShop () {
      this.$router.push('/route/index?type=1')
    },
    showQr () {
      this.$router.push('/share')
    },
    toEdit () {
      this.$router.push({
        path: '/register',
        query: {
          userId: this.user.id
        }
      })
    },
    parseTime (date) {
      return parseTime(date, '{y}-{m}-{d}')
    }
  },
  computed: {
    isMe () {
      return this.user.id === this.my.id
    },
    ...mapState({
      my: state => state.user
    })
  },
  data () {
    return {
      point: 0,
      sumUser: 0,
      sumSchool: 0,
      sumShop: 0,
      user: {},
      LEVEL_NAMES: LEVEL_NAMES,
      LEVELS: LEVELS,
      status: ['已激活', '未激活']
    }
  }
}
</script>

<style scoped lang="stylus">
.info
  padding-bottom 20px
  background-color #F5F4F7
  min-height 100%
  .bg
    height 80px
    background-color #009C4E
  .main
    margin-top -60px
    padding 0 10px
    .top
      border-radius 10px
      height 163px
      background-color #FFFFFF
      display flex
      flex-direction column
      justify-content center
      .user
        width 100%
        display flex
        justify-content center
        align-items center
        position relative
        .edit
          position absolute
          right 20px
          top 20px
          color #b9b7c0
          dpr-font(20px)
        .qr
          position absolute
          right 80px
          top 20px
          color #b9b7c0
          dpr-font(20px)
        .avatar
          margin 0 14px
          height 72px
          width 72px
          .img
            width 100%
            height 100%
            border-radius 50%
        .con
          flex 1
          display flex
          align-items flex-start
          flex-direction column
          .name
            color: #55545D;
            dpr-font(14Px)
          .code
            color #B9B7C0
            dpr-font(10Px)
            margin 9px 0
          .lv
            color white
            width:42px;
            height:15px;
            background:rgba(89,142,254,1);
            border-radius:8px;
            display flex
            align-items center
            justify-content center
            dpr-font(8Px)
      .base
        display flex
        align-items center
        justify-content center
        height 60px
        .item
          display flex
          align-items center
          flex-direction column
          justify-content space-between
          height 30px
          flex 1
          .val
            color #55545D
            dpr-font(12px)
          .text
            color #B9B7C0
            dpr-font(11Px)
    .detail
      margin-top 10px
      border-radius 10px
      padding-bottom 20px
      background-color white
      .item
        height 40px
        padding 0 19px
        display flex
        align-items center
        justify-content space-between
        border-bottom 1Px solid #F5F4F7
        &:last-child
          border none
        .text
          color #55545D
          dpr-font(12Px)
        .val
          color #B9B7C0
          dpr-font(11Px)
</style>
